<template>
	<view :class="leng > 6 ? 'cents' : 'cented'">
	<view class="" v-if="xinxi==true" style="background-color: #FFFFFF;width: 100%;height: 100%;background: #F5F5F5;" v-show="order==true">
		<view style="display: flex;align-items: center;flex-direction: column;" >
			<image src="../../static/img/pic_denglu.png" mode="" style="width: 136px;height:136px;margin-top: 20px;"></image>
			<text style="color: #000000;font-size: 18px;font-weight: 500;margin-top: 15px;">暂未登录</text>
			<text style="color: #777777;font-size: 15px;margin-top: 12px;">你还未登录，即将为你跳转登录页面~</text>
		</view>
	</view>
	<view v-if="xinxi==false">
		<view class="img" v-if="list.length == 0">
			<image src="../../static/img/pic_wuka.png" mode="" style="width: 182px;height: 146px;margin-top: 43px;margin-left:56px;"></image>
			<text style="color: #000000;font-size: 18px;font-weight: 500;margin-top: 25px;">暂无车队司机</text>
			<text style="color: #777777;font-size: 15px;margin-top: 12px;">您还没有添加车队司机，请您添加司机！</text>
		</view>
		<view class="" v-if="list.length != 0" v-for="(v, i) in list" :key="i" style="display: flex;align-items: center;justify-content: space-around;width:355px;">
			<view class="cap" @click="cartbank(i)">
				<text style="color: #042A58;font-size: 32rpx;margin-left: 30rpx;">{{ v.driverName }}</text>
				<text style="color:#627995;font-size: 32rpx;margin-left: 15px;">{{ v.driverPhone }}</text>
				<text style="color: #002CFF;font-size: 14px;margin-right: 10px;" v-if="v.managerBankCardId == 0">司机卡结算</text>
				<text style="color: #FF5F2E;font-size: 14px;margin-right: 10px;" v-if="v.managerBankCardId != 0">设置结算卡</text>
			</view>
			<view @click="none(i)" style="margin-top: 10px; color: #FF5F2E; height: 60px;width: 55px; background-color: #FFFFFF;display: flex;align-items: center;justify-content: center;	border-radius: 0px 8px 8px 0px;">
				删除
			</view>

			<!-- 	<view class="caps" v-if="v.ids != null">
				<view>
					<text style="color:#627995;font-size: 32rpx;margin-left: 15px;">{{ v.driverPhone }}</text>
					<text style="color: #002CFF;font-size: 14px;margin-left: 65px;" v-if="v.managerBankCardId == 0">司机卡结算</text>
					<text style="color: #FF5F2E;font-size: 14px;margin-left: 65px;" v-if="v.managerBankCardId != 0">设置结算卡</text>
				</view>
			</view> -->
		</view>
		<view class="loading" v-if="leng >= 6">{{ loadingTxt }}</view>
		<button @click="cart" class="button">添加司机</button>
		</view>
	</view>
</template>

<script>
import { ajax } from '../../apis.js';
import { ajaxapi} from "../../api.js"
	import {ajaxs} from "../../captainapi.js"
var page = 1;
var timer = null;
var that = this;
export default {
	data() {
		return {
			loadingTxt: '加载更多',
			add: [],
			order:false,
			startData: {
				client: '',
				clientY: ''
			},
			leng: '',
			xinxi:true,
			list:[]
		};
	},
	onLoad() {
	},
	onPullDownRefresh() {
		this.getNews();
	},
	onReachBottom() {
		var that = this;
		this.getMoreNews();
	},
	onShow() {
		var that=this
			uni.getStorage({
				key:"name",
				success(res) {
					that.add=res.data
					ajaxapi({
						url:"/v1/manager/loginsubmit",
						method:"post",
							data:{
										account:res.data[1],
										password:res.data[2],
										},
										success(res) {
										uni.setStorageSync("sessionid", res.header["Set-Cookie"])
										var name=[res.data.status,that.add[1],that.add[2]]
											uni.setStorage({
												key:"name",
												data:name
											})
										if(res.data.status=="OK"){
									uni.switchTab({
											url:"../captains/captains"
										})
										}else{
											that.order=true
										uni.showToast({
										    title: '正在前往登录请稍后',
											icon:"none"
										})
										
										setTimeout(function(){
											uni.reLaunch({
												url:"../index/index"
											})
										},1000)
											
										}				
										},
									
					})
				}, 
				fail() {
					that.order=true
					uni.showToast({
					    title: '正在前往登录请稍后',
						icon:"none"
					})
					setTimeout(function(){
						uni.reLaunch({
							url:"../index/index"
						})
					},1000)
				}
				
			})
		uni.showLoading({
			title: '加载中请稍等'
		});
		var that = this;
		this.getNews();
	},
	methods: {
		// 列表
		getMoreNews() {
			this.loadingTxt = '加载中';
			var that = this;
			uni.showNavigationBarLoading();
			ajax({
				url: '/v1/manager/driver/list',
				method: 'post',
				data: { offset: page, limit: 1 },
				success(res) {
					if (that.list.length == res.data.message.total) {
						that.loadingTxt = '已经全部加载';
						uni.hideNavigationBarLoading();
						return false;
					}
					that.list = that.list.concat(res.data.message.list);
					uni.hideNavigationBarLoading();
					uni.stopPullDownRefresh();
					page++;
					that.loadingTxt = '加载更多';
				}
			});
		},
		getNews() {
			page = 1;
			var that = this;
			uni.showNavigationBarLoading();
			setTimeout(function(){
			ajax({
				url: '/v1/manager/driver/list',
				method: 'post',
				data: { offset: page, limit: 8 },
				success(res) {
					if(res.data.status=="OK"){
						that.xinxi=false
						that.list = res.data.message.list;
						that.leng = that.list.length;
						}
						uni.hideLoading();
					uni.stopPullDownRefresh();
					uni.hideNavigationBarLoading();
					page++;
				},
				fail() {
					uni.hideNavigationBarLoading();
					uni.showToast({
					    title: '数据加载出错,请检查网络',
						icon:"none"
					})
				}
			});
			},800)
		},
		// 跳转
		cartbank(i) {
			uni.navigateTo({
				url:
					'./cartsbank?driverName=' +
					this.list[i].driverName +
					'&driverPhone=' +
					this.list[i].driverPhone +
					'&id=' +
					this.list[i].id +
					'&managerBankCardId=' +
					this.list[i].managerBankCardId +
					'&index=' +
					i
			});
		},
		mouseOver(i) {
			this.index = i;
		},
		none(i) {
			var that=this
			ajaxs({
				url: '/v1/manager/unbind/driver',
				method: 'post',
				data: {
					id: that.list[i].id
				},
				success(res) {
					if (res.data.status == 'OK') {
						ajax({
							url: '/v1/manager/driver/list',
							method: 'post',
							success(res) {
								that.list = res.data.message.list;
							}
						});
					}
				}
			});
		},

		cart() {
			uni.navigateTo({
				url: './search'
			});
		}
	}
};
</script>

<style>
.cents {
	width: 100%;
	height: 100%;
	background-color: #f5f5f5;
	display: flex;
	align-items: center;
	flex-direction: column;
}
.cented {
	width: 100%;
	height: 663px;
	background-color: #f5f5f5;
	display: flex;
	align-items: center;
	flex-direction: column;
}
.img {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.cap {
	width: 300px;
	height: 60px;
	background: rgba(255, 255, 255, 1);
	border-radius: 8px;
	margin-top: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-radius: 8px 0px 0px 8px;
}
.caps {
	width: 355px;
	height: 60px;
	background: rgba(255, 255, 255, 1);
	border-radius: 8px;
	margin-top: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.caption {
	width: 64px;
	height: 60px;
	background: rgba(244, 53, 47, 1);
	border-radius: 0px 8px 8px 0px;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
}
.button {
	width: 355px;
	height: 44px;
	background: rgba(4, 42, 88, 1);
	border-radius: 8px;
	position: fixed;
	bottom: 20px;
	color: #ffffff;
	left: 2px;
	z-index: 1;
}
.but {
	width: 355px;
	height: 44px;
	background: rgba(4, 42, 88, 1);
	border-radius: 8px;
	margin-top: 20px;
	color: #ffffff;
}
.loading {
	text-align: center;
	color: #888;
	margin-top: 10px;
	margin-bottom: 70px;
}
</style>
